<template>
  <div class="page-common-layout third-party-container">
    <div class="party-header">
      {{ menuName }}
      <a-button icon="edit" @click="handleEditor()" v-action:dsfzxzx_edit>
        编辑
      </a-button>
    </div>
    <div class="party-main">
      <div class="tabs-container">
        <a-tabs type="card" @change="changeTabs($event)" :key="refreshKey">
          <a-tab-pane :key="item.uuid" :tab="item.name" v-for="item in tabs">
          </a-tab-pane>
        </a-tabs>
        <div class="download">
          <a-button
            type="primary"
            icon="download"
            @click="handleBatchDownload()"
            :loading="downloadLoading"
            :disabled="downloadLoading"
            v-action:dsfzxzx_download
          >
            {{ downloadLoading ? "下载中" : "批量下载" }}
          </a-button>
        </div>
      </div>
      <div class="unit-container">
        <div class="data-item">
          <div class="label">单位名称：</div>
          <div class="value">{{ currentTabItem.unitName || "-" }}</div>
        </div>
        <div class="data-item">
          <div class="label">上传人：</div>
          <div class="value">{{ currentTabItem.creator || "-" }}</div>
        </div>
        <div class="data-item">
          <div class="label">上传时间：</div>
          <div class="value">{{ currentTabItem.createTime || "-" }}</div>
        </div>
      </div>
      <div class="file-container">
        <div class="main" id="preview-container">
          <!-- 文件列表 -->
          <div class="file-list">
            <div class="sub-header">
              文件列表
            </div>
            <div class="sub-main">
              <a-empty v-if="fileList.length == 0" :description="false" />
              <template v-else>
                <div
                  class="file-item"
                  v-for="(item, index) in fileList"
                  :key="index"
                  :class="[activeIndex == index && 'active']"
                >
                  <div
                    class="icon"
                    :class="[getFileIconName(item.fileName)]"
                  ></div>
                  <div class="name" @click="handleActiveFile(item, index)">
                    <a-tooltip>
                      <template slot="title">
                        {{ item.fileName }}
                      </template>
                      {{ item.fileName }}
                    </a-tooltip>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <!-- 文件预览 -->
          <div class="file-view">
            <div class="tip-name">
              <!-- 文件信息 -->
              <div class="file-info">
                <div class="block">
                  <div
                    class="icon"
                    :class="[getFileIconName(currentFile.fileName)]"
                  ></div>
                </div>
                <div class="info-content">
                  <div class="info-name">{{ currentFile.fileName || "-" }}</div>
                  <div class="user">
                    {{ currentFile.creator || "-" }}
                    <div class="drop"></div>
                    {{ currentFile.createTime || "-" }}
                  </div>
                </div>
              </div>
              <div class="operate">
                <!-- 下载 -->
                <div
                  class="block"
                  @click="downloadFile(1)"
                  title="下载"
                  v-action:dsfzxzx_download
                >
                  <a-icon type="download" />
                </div>
                <!-- 全屏 -->
                <div
                  class="block"
                  :title="isFull ? '退出全屏' : '全屏'"
                  @click="!isFull ? handleFullScreen() : exitFullscreen()"
                >
                  <a-icon :type="isFull ? 'fullscreen-exit' : 'fullscreen'" />
                </div>
              </div>
            </div>
            <div class="view-container">
              <iframe
                v-if="fileUrl && fileList.length > 0"
                :src="fileUrl"
                frameborder="0"
                id="preFileIframe"
                width="100%"
                height="100%"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑 -->
    <editorPage
      :key="editorPage.key"
      :visible.sync="editorPage.visible"
      :parameter="editorPage.source"
    ></editorPage>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import {
  getToken,
  downloadDfs,
  downLoadBatchFileByArraybuffer,
} from "@/utils/TopVUI";
import { getFileIconName, _getUUID } from "@/utils/util.js";
import { detailCanton } from "@/api/cantonManage";
//编辑
import editorPage from "./editorPage";
export default {
  components: {
    editorPage,
  },
  data() {
    return {
      // 页签
      tabs: [],
      activeKey: "",
      //表单
      form: {},
      //文件列表
      fileList: [],
      activeIndex: 0,
      //选择的文件
      currentFile: {},
      //文件地址
      fileUrl: "",
      //全屏状态
      isFull: false,
      //下载
      downloadLoading: false,
      //编辑
      editorPage: {
        visible: false,
        key: _getUUID(),
        source: {},
      },
      //选中的tab
      currentTabItem: {},
      refreshKey: _getUUID(),
    };
  },

  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
  },
  created() {},
  mounted() {
    window.addEventListener("resize", () => {
      this.isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
    });
    this.getDetail();
  },
  methods: {
    getFileIconName,
    //编辑
    handleEditor() {
      this.editorPage.key = _getUUID();
      this.editorPage.source = this.form;
      this.editorPage.visible = true;
    },

    //详情
    getDetail() {
      this.refreshKey = _getUUID();
      detailCanton({
        code: "DSFZX",
      })
        .then((res) => {
          this.form = res ?? {};
          //
          this.tabs = res?.childList ?? [];
          this.currentTabItem = this.tabs?.[0] ?? {};
          //
          this.fileList = JSON.parse(this.tabs?.[0]?.files ?? "[]");
          //
          this.currentFile = this.fileList?.[0] ?? {};
          this.getFileUrl();
        })
        .catch((_) => {
          this.form = {};
          this.tabs = [];
          this.fileList = [];
          this.currentTabItem = {};
        });
    },
    changeTabs(key) {
      let current = this.tabs.find((v) => v.uuid == key);
      this.currentTabItem = current;
      this.fileList = JSON.parse(current?.files ?? "[]");
      this.currentFile = this.fileList?.[0] ?? {};
      this.getFileUrl();
    },

    //选择文件
    handleActiveFile(item, index) {
      this.activeIndex = index;
      this.currentFile = item;
      this.getFileUrl();
    },

    //预览
    getFileUrl() {
      let { url } = this.currentFile;
      this.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
    },

    //下载
    downloadFile() {
      let { url } = this.currentFile;
      downloadDfs(url);
    },

    //批量下载
    handleBatchDownload() {
      let { detailId, name } = this.currentTabItem;
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/constructionProgram/batchExportZip?detailId=${detailId}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          downLoadBatchFileByArraybuffer(data, name);
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //全屏
    handleFullScreen() {
      const element = document.getElementById("preview-container");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },

    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.third-party-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  .party-header {
    height: 64px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #333333;
    flex-shrink: 0;
  }
  .party-main {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .tabs-container {
      display: flex;
      /deep/.ant-tabs {
        flex: 1;
        .ant-tabs-nav .ant-tabs-tab {
          margin-right: 8px !important;
          height: 100% !important;
        }
        .ant-tabs-nav-container {
          height: 40px !important;
        }
        .ant-tabs-content {
          display: none;
        }
      }
      .download {
        height: 40px;
        border-bottom: 1px solid #e8e8e8;
      }
    }

    .unit-container {
      padding: 0 30px;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 16px;
      .data-item {
        flex: 1;
        display: flex;
        font-weight: 400;
        font-size: 14px;
        .label {
          color: #8a9295;
          flex-shrink: 0;
        }
        .value {
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }
      }
    }

    .file-container {
      flex: 1;
      border-radius: 6px 6px 6px 6px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .header {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        color: #333333;
        padding: 10px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #d4d7d8;
      }
      .main {
        flex: 1;
        padding: 10px 16px;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        background: #ffffff;
        .icon {
          width: 18px;
          height: 18px;
          margin: 0 10px;
          flex-shrink: 0;
          &.pdf {
            background: url("~@/assets/img/fileIcon/pdf.png");
            background-size: 100% 100%;
          }
          &.doc {
            background: url("~@/assets/img/fileIcon/doc.png");
            background-size: 100% 100%;
          }
          &.xls {
            background: url("~@/assets/img/fileIcon/xls.png");
            background-size: 100% 100%;
          }
          &.ppt {
            background: url("~@/assets/img/fileIcon/ppt.png");
            background-size: 100% 100%;
          }
          &.image {
            background: url("~@/assets/img/fileIcon/image.png");
            background-size: 100% 100%;
          }
          &.txt {
            background: url("~@/assets/img/fileIcon/txt.png");
            background-size: 100% 100%;
          }
          &.zip {
            background: url("~@/assets/img/fileIcon/zip.png");
            background-size: 100% 100%;
          }
          &.music {
            background: url("~@/assets/img/fileIcon/music.png");
            background-size: 100% 100%;
          }
          &.video {
            background: url("~@/assets/img/fileIcon/video.png");
            background-size: 100% 100%;
          }
          &.annex {
            background: url("~@/assets/img/fileIcon/annex.png");
            background-size: 100% 100%;
          }
          &.cad {
            background: url("~@/assets/img/fileIcon/cad.png");
            background-size: 100% 100%;
          }
        }
        .file-list {
          width: 300px;
          border-radius: 4px 0px 0px 4px;
          border: 1px solid #d4d7d8;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .sub-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            box-sizing: border-box;
            font-size: 16px;
            color: #333333;
            .all-select {
              font-size: 14px;
              color: #1890ff;
              cursor: pointer;
            }
          }
          .sub-main {
            flex: 1;
            overflow: auto;
            position: relative;
            /deep/.ant-empty {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
            .file-item {
              height: 32px;
              padding: 0 16px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333333;
              margin-bottom: 8px;
              .name {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
              }
              &.active {
                background: rgba(24, 144, 255, 0.1);
                .name {
                  color: #1890ff;
                }
              }
            }
          }
        }
        .file-view {
          background: #f7f7f7;
          flex: 1;
          border-radius: 0 4px 4px 0px;
          border: 1px solid #d4d7d8;
          border-left: 0;
          position: relative;
          display: flex;
          flex-direction: column;
          .tip-name {
            height: 64px;
            width: 100%;
            background: #ffffff;
            border-radius: 0px 4px 0px 0px;
            border-bottom: 1px solid #d4d7d8;
            padding: 0 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .block {
              width: 32px;
              height: 32px;
              background: #ffffff;
              box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
              border-radius: 4px 4px 4px 4px;
              margin-right: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .file-info {
              display: flex;
              align-items: center;
              .info-content {
                .info-name {
                  font-size: 14px;
                  color: #333333;
                }
                .user {
                  display: flex;
                  align-items: center;
                  font-size: 12px;
                  color: #8a9295;
                  .drop {
                    margin: 0 8px;
                    width: 4px;
                    height: 4px;
                    background: #8a9295;
                    border-radius: 10px 10px 10px 10px;
                  }
                }
              }
            }
            .operate {
              display: flex;
              align-items: center;
              .block {
                cursor: pointer;
                &:last-of-type {
                  margin-right: 0;
                }
              }
            }
          }
          .view-container {
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
